<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WFS</title>
    <script type="text/javascript" include="bootstrap-css,jqury" src="../js/include-web.js"></script>
    <script src="../../dist/openlayers/include-openlayers.js"></script>
    <script
        src="../js/supermap/SuperMap.Include.js"></script>
</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
    <div id="map" style="width: 100%;height:100%"></div>
    <script>
        var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [102.73333, 25.05],
                zoom: 1
            }),
            layers: [new ol.layer.Tile({
                source: new ol.source.OSM()
            })],
        });

        var vectorSource = new ol.source.Vector();

        var vector = new ol.layer.Vector({
            source: vectorSource,
            strategies: [new SuperMap.Strategy.BBOX()],
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0, 0, 255, 1.0)',
                    width: 2
                })
            })
        });
     

        var featureRequest = new ol.format.WFS().writeGetFeature({
            srsName: 'EPSG:4326',
            featureNS: 'http://www.supermap.com/China',
            featurePrefix: 'China',
            featureType: 'China_Province_pg',
            outputFormat: 'application/json',
            geometryName: "the_geom"
        });

        console.log('body :', new XMLSerializer().serializeToString(featureRequest));

        fetch('http://localhost:8090/iserver/services/data-China4002/wfs100', {
            method: 'POST',
            body: new XMLSerializer().serializeToString(featureRequest)
        }).then(function (response) {
            console.log('response :', response);
            return response.json();
        }).then(function (json) {
            console.log('json :', json);
            var features = new ol.format.GeoJSON().readFeatures(json);
            vectorSource.addFeatures(features);
            map.getView().fit(vectorSource.getExtent());
        });
        map.addLayer(vector);
    </script>

    </script>
</body>

</html>